<template>
  <div class="sty-setting">
    <Title title="样式配置" />
    <div v-for="(item, index) in moduleSetting" :key="index" style="padding-left:11px;">
      <div v-if="item.type === 'common' && item.tag !== tag" class="common-box">
        <span class="common-title">{{ item.title }}</span>
        <div class="common-border">
          <div v-for="(items, i) in item.config" :key="i">
            <div v-if="!items.typeComp" class="common-item">
              <span style="font-size: 14px;margin-right: 12px;color: #999">{{ items.label }}</span>
              <!-- 颜色选择器 -->
              <el-color-picker v-if="items.name === 'ColorPicker'" v-model="items.value" :show-alpha="true" color-format="rgb" size="small" @change="getConfig"/>
              <!-- 下拉框选择 -->
              <el-select v-if="items.name === 'Select'" v-model="items.value" size="mini" placeholder="请选择" style="width: 56px" @change="getConfig">
                <template v-if="items.label === '字体大小'">
                  <el-option
                    v-for="i in items.options"
                    :key="i"
                    :label="i"
                    :value="i" />
                </template>
                <template v-if="items.label === '边框大小'">
                  <el-option
                    v-for="i in 11"
                    :key="i-1"
                    :label="i-1"
                    :value="i-1" />
                </template>
              </el-select>
              <!-- 开关 -->
              <el-switch v-if="items.name === 'Switch'" v-model="items.value" class="fb-switch" @change="getConfig" />
            </div>
            <div v-if="items.typeComp === typeComp" class="common-item">
              <span v-if="items.label" style="font-size: 14px;margin-right: 12px;color: #999">{{ items.label }}</span>
              <!-- 上传背景图片 -->
              <div v-if="items.name === 'upload'" class="upload-box">
                <upAttachment
                  ref="uploadImg"
                  :import-api="importApi"
                  :hide-confirm="true"
                  :hide-clip-up="true"
                  :title-bg="true"
                  :is-upload="isUpload"
                  :bg-img="items.value"
                  style="width: 50px;"
                  @complateSetData="complateSetData"
                  @removeFileList="removeFileList" />
                <div v-if="items.value" class="clear-img" @click="clearImg(items)">x</div>
              </div>
              <!-- 单选组 -->
              <el-radio-group v-if="items.name === 'radioGroup'" v-model="items.value" @change="getConfig">
                <el-radio v-for="(val, j) in items.options" :key="j" :label="val.label">{{ val.name }}</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
      </div>
      <div v-if="item.type === type || item.kind === kind" class="common-box">
        <span class="common-title">{{ item.title }}</span>
        <div class="common-border">
          <div v-for="(items, index) in item.config" :key="index" class="common-item">
            <span v-if="items.label" style="font-size: 14px;margin-right: 12px;color: #999">{{ items.label }}</span>
            <!-- 颜色选择器 -->
            <el-color-picker v-if="items.name === 'ColorPicker'" v-model="items.value" :show-alpha="true" color-format="rgb" size="small" @change="getConfig"/>
            <!-- 下拉框选择 -->
            <el-select v-if="items.name === 'Select'" v-model="items.value" :style="!items.label ? {width: '108px'} : {}" size="mini" placeholder="请选择" style="width: 56px" @change="getConfig">
              <el-option
                v-for="i in items.options"
                :key="i"
                :label="i"
                :value="i" />
            </el-select>
          </div>
        </div>
      </div>
      <div v-if="item.type === typeComp" class="common-box">
        <span class="common-title">{{ item.title }}</span>
        <div class="common-border">
          <div v-for="(items, index) in item.config" :key="index" class="common-item">
            <span v-if="items.label" style="font-size: 14px;margin-right: 12px;color: #999">{{ items.label }}</span>
            <!-- 颜色选择器 -->
            <el-color-picker v-if="items.name === 'ColorPicker'" v-model="items.value" :show-alpha="true" color-format="rgb" size="small" @change="getConfig"/>
            <!-- 下拉框选择 -->
            <el-select v-if="items.name === 'Select'" v-model="items.value" size="mini" placeholder="请选择" style="width: 56px" @change="getConfig">
              <el-option
                v-for="i in items.options"
                :key="i"
                :label="i"
                :value="i" />
            </el-select>
            <!-- 开关 -->
            <el-switch v-if="items.name === 'Switch'" v-model="items.value" class="fb-switch" @change="getConfig" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Title from '@/components/Title';
import upAttachment from '@/components/Common/upAttachment/index';
import moduleSetting from './mixins/styData';
import downloadIcon from '@/assets/import.png';
import ImportList from '@/mixins/importList';

export default {
  components: { Title, upAttachment },
  mixins: [moduleSetting, ImportList],
  props: {
    type: {
      type: String,
      default: ''
    },
    typeComp: {
      type: String,
      default: ''
    },
    kind: {
      type: String,
      default: ''
    },
    tag: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      downloadIcon,
      bgImg: '',
      importApi: '/admin/charts/upload',
      isUpload: true
    };
  },
  methods: {
    setDefault(oldData) {
      // 把接口返回的数据注入到 moduleSetting
      try {
        const setting = JSON.parse(oldData);
        if (setting && setting.length) {
          setting.forEach(i => {
            this.moduleSetting.forEach(j => {
              if (i.title === j.title) {
                this.setConfig(i.config, j.config);
              }
            });
          });
        }
      } catch (error) {
        console.log(error);
      }
    },
    setConfig(newConfig, defaultConfig) {
      newConfig.forEach(i => {
        defaultConfig.forEach(j => {
          if (i.word === j.word) {
            j.value = i.value;
          }
        });
      });
    },
    getConfig() {
      this.$emit('getConfig', this.moduleSetting);
    },
    beforeUpload(file) { // 判断文件格式大小
    },
    complateSetData({ data, fileName }) {
      this.bgImg = data;
      this.moduleSetting.map(items => {
        if (items.title === '背景配置：') {
          const ary = items.config.find(i => i.label === '设置背景图片');
          ary.value = this.bgImg;
        }
        this.getConfig();
        return items;
      });
    },
    removeFileList() {},
    clearImg(items) {
      items.value = '';
      this.getConfig();
    }
  }
};
</script>
<style lang="scss">
.sty-setting {
  .common-box {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .common-title {
      font-size: 14px;
      font-weight: 500;
      color: #666;
    }
    .common-border {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-left: 10px;
    }
    .common-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-right: 32px;
      .el-color-picker, .el-color-picker .el-color-picker__trigger {
        width: 38px;
        height: 22px;
      }
      .el-input--mini {
        .el-input__inner {
          height: 22px;
        }
        .el-icon-arrow-up {
          &::before {
            position: absolute;
            top: -4px;
            left: 0px;
          }
        }
        .el-icon-arrow-up.is-reverse {
          &::before {
            position: absolute;
            top: -4px;
            left: 11px;
          }
        }
      }
      .medium-file-uploader {
        width: 50px;
        height: 50px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        .bg-uploader-icon {
          font-size: 16px;
          color: #8c939d;
          width: 50px;
          height: 50px;
          line-height: 50px;
          text-align: center;
        }
        .bg {
          width: 50px;
          height: 50px;
          display: block;
        }
      }
      .upload-box {
        position: relative;
      }
      .clear-img {
        width: 12px;
        height: 12px;
        line-height: 12px;
        text-align: center;
        position: absolute;
        top: -2px;
        right: -2px;
        background: #406EFF;
        color: #fff;
        border-radius: 50%;
        cursor: pointer;
      }
    }
  }
}
</style>
